<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入外部的vue.js -->
		<script src="./js/vue@3.3.4.global.js"></script>
		<!-- 引入axios组件 -->
		<script src="./js/axios.js"></script>
	</head>
	<body>
		<!-- 2.创建视图 -->
		<div id="app">
			<button @click="getData">获取远程的数据</button>
			<table border="1" width="100%">
				<tr>
					<td>编号</td>
					<td>name</td>
					<td>phone</td>
					<td>email</td>
				</tr>
				<tr v-for="(user,index) in userList" :key="index">
					<td>{{user.id}}</td>
					<td>{{user.name}}</td>
					<td>{{user.phone}}</td>
					<td>{{user.email}}</td>
				</tr>
			</table>
			<button @click="getComments(postId)">传递参数获取数据</button>
			<br>
			<button @click="getByPost">使用post请求数据</button>
			<br>
			<button @click="getByPost2">使用post传递参数请求数据</button>
		</div>
		
	</body>
	<script>
		//3.创建Vue的实例
		const app = Vue.createApp({
			data(){
				return {
					userList: [], //用户列表
					postId: 1 //默认值为1
				}
			},
			methods:{
				//获取远程数据的函数
				getData(){
					//根据axios的语法来使用
					axios.get('https://jsonplaceholder.typicode.com/users') //发送请求
					.then((resp)=>{ //把返回的数据封装在resp,接受数据
						console.log(resp.data);	
						//接受返回的数据
						this.userList = resp.data;
						
					}) 
					.catch((error)=>{//如果出现异常，就要执行的代码
						console.log(error);
					})
				},
				//传递参数
				getComments(postId){
					axios.get('https://jsonplaceholder.typicode.com/comments',{
						params:{
							postId:postId
						}
					}).then((resp)=>{
						console.log(resp.data);
					}).catch((error)=>{
						console.log(error);
					})
				},
				//post请求
				getByPost(){
					axios.post('https://jsonplaceholder.typicode.com/posts')
					.then((resp)=>{
						console.log(resp);
					})
					.catch((error)=>{
						console.log(error);
					})
				},
				getByPost2(){
					axios.post('https://jsonplaceholder.typicode.com/posts',{
						//传递的参数
						userId:1001,
						title: '标题',
						body: '这是主体部分'
					})
					.then((resp)=>{
						console.log(resp);
					})
					.catch((error)=>{
						console.log(error);
					})
				}
			}
		})
		//4.挂载
		app.mount('#app')
	</script>
</html>